﻿@using hc.epm.Common
@using hc.Plat.Common.Extend;
@using hc.epm.ViewModel;
@model MonitorView
@{
    ViewBag.Title = "整改";
    ViewBag.MonitorRectifRecordId = Model.MonitorRectifRecord == null ? 0 : Model.MonitorRectifRecord.Id;
}
<style>
    .datalist tr td {
        padding: 2px;
    }

        .datalist tr td input[type="text"] {
            width: 100%;
            height: 100%;
            border: 1px solid #ccc;
            padding: 0 10px;
            box-sizing: border-box;
        }

    .selectpicker {
        width: 100%;
        height: 100%;
    }
</style>
<body>
    <div class="contentData">
        <div class="tab-view">
            <form id="mainForm">
                <div class="tab">
                    <div class="long-text">
                        <label for="PrejectName"><span class="star">*</span>&nbsp;项目名称&nbsp;:</label>
                        <input type="text" id="ProjectName" name="ProjectName" value="@Model.Monitor.ProjectName" disabled autocomplete="off" />
                        <i class="pic iconfont" width="20" height="30" style="cursor:pointer; left:596px;">&#xe76a;</i>
                        <input type="hidden" name="projectId" id="projectId" value="@Model.Monitor.ProjectId" />
                    </div>
                    <div class="long-text">
                        <label for="Title"><span class="star">*</span>&nbsp;检查标题&nbsp;:</label>
                        <input type="text" id="Title" name="Title" disabled value="@Model.Monitor.Title" />
                    </div>
                    <input type="hidden" name="Id" value="@ViewBag.MonitorRectifRecordId" />
                    <div class="intro" style="height:100%;">
                        <div><label>&nbsp;问题&nbsp;:</label></div>
                        <table class="datalist" style="word-break:break-all;word-wrap:break-word;width:80%">
                            <thead>
                                <tr>
                                    <th width="30%">问题</th>
                                    <th width="25%">整改单位</th>
                                    <th width="30%">要求完成日期</th>
                                </tr>
                            </thead>
                            <tbody>
                                @if (Model.MonitorDetails != null && Model.MonitorDetails.Count() > 0)
                                {
                                    foreach (var item in Model.MonitorDetails)
                                    {
                                        <tr>
                                            <td>@item.Name</td>
                                            <td>@item.RectifCompanyName</td>
                                            <td>
                                                @(item.Deadline == null ? "" : Convert.ToDateTime(item.Deadline).ToString("yyyy-MM-dd"))
                                            </td>
                                        </tr>
                                    }
                                }
                            </tbody>
                        </table>
                    </div>
                    <div class="upload">
                        <div><label>&nbsp;检查资料&nbsp;:</label></div>
                        <div style="width:100%;margin:3px 20px 20px 0px;" id="fileList">
                            <ul class="fileShow"></ul>
                        </div>
                    </div>
                    <div class="short-text">
                        <label><span class="star">*</span>&nbsp;整改完成时间&nbsp;:</label>
                        <input type="text" id="FinishDate" name="FinishDate" onClick="WdatePicker({ el: 'FinishDate' })" autocomplete="off" value="">
                        <i onClick="WdatePicker({ el: 'FinishDate' })" class="pic iconfont" width="20" height="30" style="cursor:pointer;">&#xe7e2;</i>
                    </div>
                    <div class="intro">
                        <div><label><span class="star">*</span>&nbsp;整改内容&nbsp;:</label></div>
                        <div>
                            <textarea class="sub-description" value="" id="Content" name="Content"></textarea>
                        </div>
                    </div>
                    <div class="upload" style="margin-bottom:0px;margin-top:30px;">
                        <div><label>&nbsp;附件上传&nbsp;:</label></div>
                        <div class="btn-upload">
                            <input type="button" id="btnUploadFile" style="position: relative; z-index: 1;" value="上传附件" />
                            <input type="file" id="loadFile" name="loadFile" style="display:none" onchange="uploadFile()">
                           </div>
                    </div>
                    <div style="width:100%;" id="fileListFile" class="fileListFile">
                        <ul class="fileShow"></ul>
                        <input type="hidden" name="fileDataJsonFile" id="fileDataJsonFile">
                    </div>
                    <div class="button-group btn-center">
                        <button type="button" class="saveBut" data-state="@(RectificationState.Rectificationed.GetValue().ToString())">提交</button>
                        <input type="hidden" name="State" id="State" />
                    </div>
                </div>
            </form>
        </div>
    </div>
    <script>
        //获取附件
        $.post("/Files/GetFileList", { tableName: 'Epm_Monitor', id: '@Model.Monitor.Id' }, function (data) {
            if (data.Flag) {
                if (data.Data.length > 0) {
                    data.Data.forEach(function (item, index, arr) {
                        if (item.ImageType == null) {
                            var odiv = '<li id="' + item.GuidId + '">';
                            odiv += '<div class="downloadFile"><img src="' + getFileImg(item.Name) + '" style="width: 20px;height: 20px;cursor: pointer;" class="imgShow"/><a href="javascript:;" target="_blank">' + item.Name + '</a></div>';
                            odiv += '<div>' + item.Size + '</div>';
                            odiv += '<span style="margin-left:20px;">' + item.CreateUserName + '</span>';
                            odiv += '<span style="margin-left:20px;">' + new Date(formatDateByJson(item.CreateTime)).Format("yyyy-MM-dd") + '</span>';
                            odiv += '<input type="hidden" class="hiddenArea" data-group="' + item.Group + '" data-url="' + item.Url + '" data-filename="' + item.Name + '">';
                            odiv += '</li>';
                            $('#fileList .fileShow').append(odiv);
                        }
                    });
                }
            } else {
                parent.layer.alert(data.Message, { icon: 2 });
            }
        });

        var fileDataArray = [];
        function uploadFile() {
            if (document.getElementById("loadFile").files.length == 0) {
                return;
            }
            var fileObj = document.getElementById("loadFile").files[0]; // js 获取文件对象
            var formFile = new FormData();
            formFile.append("file", fileObj);
            var path = formFile;

            $.ajax({
                url: "/Upload/UploadHB",
                type: "POST",
                data: path,
                contentType: false,
                processData: false,
                success: function (data) {
                    for (var i = 0; i < data.length; i++) {
                        var obj = {};
                        obj.Name = data[i].Name;
                        obj.GuidId = data[i].GuidId;
                        obj.Size = data[i].Size;
                        obj.ImageType = data[i].ImageType;
                        obj.Group = data[i].ResponseObject.FDFS_GROUP;
                        obj.Url = data[i].ResponseObject.FDFS_NAME;
                        fileDataArray.push(obj);

                        if (data[i].ImageType == null) {
                            var imgUrl = getFileImg(obj.Name);
                            var odiv = '<li id="' + obj.GuidId + '">';
                            odiv += '<div><img src="' + imgUrl + '" style="width: 20px;height: 20px;cursor: pointer;" class="imgShow"/><a href="javascript:;" target="_blank">' + obj.Name + '</a></div>';
                            odiv += '<div style="text-align:right; width:80px;">' + obj.Size + '</div>';
                            odiv += '<span style="margin-left:20px;">' + data[i].UploadName + '</span>';
                            odiv += '<span style="margin-left:20px;">' + new Date(formatDateByJson(data[i].UploadDate)).Format("yyyy-MM-dd") + '</span>';
                            odiv += '<span style="margin-left:20px;cursor: pointer;color:blue" class="fileDel" data-val="' + obj.GuidId + '">删除</span>'
                            odiv += '</li>';
                            $('#fileListFile .fileShow').append(odiv);
                        }
                    }
                    fileDataJson = JSON.stringify(fileDataArray);
                    $("#fileDataJsonFile").val(fileDataJson);
                    $("#loadFile").val("");
                }
            });
        }

        $(function () {
            $('#btnUploadFile').click(function () {
                document.getElementById("loadFile").click();
            });
            $("#mainForm").validate({
                errorClass: "validaterror",
                validClass: "validatevalid",
                errorElement: "span",
                success: function (label) {
                    label.addClass("validatevalid").html("&nbsp;");
                },
                rules: {
                    FinishDate: {
                        required: true,
                        date: true
                    },
                    Content: {
                        required: true,
                    },
                },
                messages: {
                    FinishDate: {
                        required: "整改完成时间不能为空",
                        date: "日期格式错误"
                    },
                    Content: {
                        required: "整改内容不能为空",
                    },
                }
            });
            layui.use(['layer', 'form', 'element'], function () {
                var layer = layui.layer, element = layui.element, $ = layui.jquery;
                //确认
                $(".saveBut").click(function () {
                    if ($("#mainForm").valid()) {
                        var search = $("form").serialize();
                        $.post("UploadRectifyResult", search, function (data) {
                            if (data.Flag) {
                                layer.msg("操作成功", { time: 1000, icon: 1 }, function () {
                                    window.location.href = "/Monitor/IndexAQ";
                                });
                            } else {
                                layer.alert(data.Message, { icon: 2 });
                            }
                        });
                    }
                });

                //删除附件
                $("#fileListFile").on("click", ".fileDel", function () {
                    $(this).parents("li").remove();
                    var toremove = '';
                    var id = $(this).data("val");
                    //----删除初始文件对应的值
                    fileDataArray = fileDataArray.filter(function (item, index, arr) {
                        return item.GuidId != id
                    });
                    fileDataJsonFile = JSON.stringify(fileDataArray);
                    $("#fileDataJsonFile").val(fileDataJsonFile);
                });

                //下载附件
                $("body").on("click", ".downloadFile", function () {
                    var group = $(this).parent().find(".hiddenArea").data("group");
                    var path = $(this).parent().find(".hiddenArea").data("url");
                    var fileName = $(this).parent().find(".hiddenArea").data("filename");
                    window.location.href = "/Download/DownLoadHB?group=" + group + "&path=" + path + "&fileName=" + fileName;
                });
            });
        });
    </script>
</body>
